<template>
	<div id="user">
		<div class="recharge_title">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">发票记录</el-breadcrumb-item>
				<el-breadcrumb-item>发票信息设置</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="recharge_cen">
			<el-form ref="invoiceObj" :model="invoiceObj" label-width="80px">
				<el-form-item label="发票抬头" class="invoice_input">
					<el-input v-model="invoiceObj.company_name"></el-input>
				</el-form-item>
				<el-form-item label="发票类型" class="invoice_input">
					<el-select v-model="invoiceObj.invoice_type" placeholder="请选择发票类型">
						<el-option label="普通发票" value="common"></el-option>
						<el-option label="增值税发票" value="added"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="税号" class="invoice_input">
					<el-input v-model="invoiceObj.abbr"></el-input>
				</el-form-item>
				<el-form-item label="收件人" class="invoice_input">
					<el-input v-model="invoiceObj.name"></el-input>
				</el-form-item>
				<el-form-item label="电话号码" class="invoice_input">
					<el-input v-model="invoiceObj.tel"></el-input>
				</el-form-item>
				<el-form-item label="收货地址" class="invoice_input">
					<el-input type="textarea" v-model="invoiceObj.street"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="invoiceSure">保存</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>

		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { mapActions, mapState, mapGetters } from 'vuex'
	export default {
		data(){
			return{
				invoiceObj:{
					name:"",
					street:"",
					tel:"",
					company_name:"",
					invoice_type:"",
					abbr:""
				}
			}
		},
		computed: { ...mapGetters(['current_user']) },
		mounted() {
			console.log(this.current_user)
		},
		methods: {
			invoiceSure(){
				console.log(this.invoiceObj)
				this.$http.post("users/"+this.current_user.id  +"/add_user_invoice", this.invoiceObj).then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style>
	.recharge_title {
		height: 70px;
		background-color: white;
		line-height: 70px;
	}
	.recharge_cen {
		background-color: white;
		width: 90%;
		margin: 3% auto;
		height: 900px;
		text-align: center;
	}
	.invoice_input{
		width: 40%;
	}
</style>